<template>
	<div class="flex-start-center-wrap">
		<div
			v-for="(upkeepItem, upkeepIndex) in itemList || []"
			:key="upkeepIndex"
			style="width: 240px;padding: 2px;cursor: pointer;"
			@click="onSelectUpkeepItem(upkeepItem)"
		>
			<div class="upkeep-item" :class="setType(upkeepItem)">
				<div v-if="isSignIn && !checkUpkeepData.some(x => x.id === upkeepItem.id) && upkeepItem.upkeepState !== 2" class="item-checkbox"></div>
				<span v-else-if="checkUpkeepData.some(x => x.id === upkeepItem.id) || upkeepItem.upkeepState === 2" class="el-icon-s-flag item-gap upkeep-item-flag"></span>
				<div class="width-100-percent">
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div class="upkeep-item-name">
							<span class="el-icon-s-open item-gap"></span>
							<span class="">{{ upkeepItem.sortNum }}、{{ upkeepItem.upkeepItemName || '无' }}</span>
						</div>
						<!--<div v-if="[4, 5, 6].includes(upkeepItem.cycleUnit)" class="flex-start-center upkeep-item-val">
							<span class="item-gap">当前{{ transferCircleUnitName(upkeepItem.cycleUnit) }}:</span>
							<span class="" style="margin-right: 3px;">{{ upkeepItem.accrualQty || 0 }}</span>
						</div>-->
					</div>
					<!--周期单位是产量(4, 5, 6)时，不展示计划时间，展示当前产量-->
					<div v-if="![4, 5, 6].includes(upkeepItem.cycleUnit)" style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">计划时间:</span>
						<span class="item-val">{{ upkeepItem.planUpkeepTime || '无' }}</span>
					</div>
					<div v-else style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">当前{{ transferCircleUnitName(upkeepItem.cycleUnit) }}:</span>
						<span class="item-val">{{ upkeepItem.accrualQty || '0' }}</span>
					</div>
					<div style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">上次时间:</span>
						<div class="item-val">
							<span style="margin-right: 3px;">{{ upkeepItem.lastUpkeepEndTime || '无' }}</span>
						</div>
					</div>
					<div style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">周期单位:</span>
						<div class="item-val">
							<span style="margin-right: 3px;">{{ transferCircleUnit(upkeepItem) }} {{ [4, 5].includes(upkeepItem.cycleUnit) ? upkeepItem.accrualQty : '' }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>

    import upkeepMixin from '../../upkeepItemPlan/upkeep';

    export default {
        mixins: [upkeepMixin],
        props: {
            checkUpkeepData: {
                type: Array,
                default() {
                    return [];
                }
            },
            isSignIn: {
                type: Boolean,
                default: false
            },
            itemList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {

            };
        },
        methods: {
            setType(item) {
                let type = '';
                if (item.upkeepState === 0) {
                    type = 'primary';
                } else if (item.upkeepState === 1) {
                    type = 'warning';
                } else if (item.upkeepState === 2) {
                    type = 'success';
                } else if (item.upkeepState === 3) {
                    type = 'info';
                }
                return type;
            },
            onSelectUpkeepItem(e) {
                /* if (this.isSignIn) {
                    // 未勾选签到和保养中的不能选择
                    if (e.upkeepState === 2) return;
                    const has = this.checkUpkeepData.some(x => x.id === e.id);
                    let arr = this.checkUpkeepData.map(x => x);
                    if (has) {
                        arr = this.checkUpkeepData.filter(x => x.id !== e.id);
                    } else {
                        arr.push(e);
                    }
                    this.$emit('change', arr);
                } else {
                    this.$emit('on-detail', e);
                }*/
            }

        }
    };
</script>

<style scoped lang="scss">
.default {
    background-color: #91d5ff;
    border-color: #91d5ff;
    color: #1890ff;
}

.success {
    background-color: #b7eb8f;
    border-color: #b7eb8f;
    color: #19be6b;
}
.primary {
    background-color: #91d5ff;
    border-color: #91d5ff;
    color: #1890ff;
}

.warning {
    background-color: #ffbb96;
    border-color: #ffbb96;
    color: #fa541c;
}

.info {
    background-color: #e8eaec;
    border-color: #e8eaec;
    color: #515a6e;
}
.item-label {
    width: 70px;
    //text-align: right;
    color: #808695;
    margin-right: 3px;
}
.item-val {
    color: #515a6e;
}
.upkeep-item {
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
    .upkeep-item-name {
        font-size: 13px;
        color: #515a6e;
    }
    .upkeep-item-val {
        font-size: 12px;
    }
    .item-checkbox {
        width: 12px;
        height: 12px;
        border: solid 1px #2d8cf0;
        margin-right: 4px;
        flex-shrink: 0;
    }
    .upkeep-item-flag {
        font-size: 12px;
    }
}
</style>
